<template>
	<view class="myStaff-container">
		<!-- 自定义导航栏 -->
		<u-navbar title="我的员工" :border-bottom="false" title-size="28" title-color="#333">
			<view slot="right" class="right">
				<text @click="toAddStaff" style="color: #00c582; font-size: 28rpx">新增</text>
			</view>
		</u-navbar>
		
		<!-- tab筛选切换 -->
		<u-tabs
			:list="tabLlist"
			:is-scroll="false"
			v-model="currentTab"
			@change="tabChange"
			active-color="#00C582"
			:active-item-style="{ color: '#333', fontWeight: 'normal' }"
		></u-tabs>
		
		<!-- 员工页面主体 -->
		<view class="container-box">
			<z-paging ref="paging" :fixed="false" v-model="staffList" @query="queryList">
				<template #loadingMoreNoMore>
					<div style="text-align: center; color: #999; padding-bottom: 24rpx">没有更多了</div>
				</template>
				
				<template #empty></template>
				
				<view @click="staffHandle(item)" v-for="item in 13" :key="item" class="staff-item">
					<view class="item-top">
						<view class="date">2024-12-12 12:30:30</view>
						<view v-if="true" class="status enable">启用</view>
						<view v-if="false" class="status disable">禁用</view>
					</view>
					<view class="item-bottom">
						<view class="name">啦啦啦</view>
						<view class="phone">13999999999</view>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
	
	<cdsPicker v-model="PickerShow" title="员工操作" :showFooter="false">
		<template v-slot:body>
			<view class="picker-body">
				<view v-if="true" class="picker-item">启用</view>
				<view v-if="false" class="picker-item">禁用</view>
			</view>
		</template>
	</cdsPicker>
</template>

<script setup>
import { ref } from 'vue';
import cdsPicker from '@/subPages/components/cds-picker/index.vue'

// tab列表
const tabLlist = ref([
	{
		name: '全部',
		value: ''
	},
	{
		name: '正常',
		value: 1
	},
	{
		name: '禁用',
		value: 2
	}
]);

// tab切换
const currentTab = ref(0);
const tabChange = (index) => {
	console.log(index);
	console.log(tabLlist.value[index]);
};

// 员工列表查询
const staffList = ref([]);
const paging = ref(null);
const queryList = (pageNo, pageSize) => {
	console.log(pageNo, pageSize);
	paging.value.complete([1, 2, 3, 4]);
};

// 员工启用/禁用操作
const PickerShow = ref(false); // 启用/禁用弹窗
const staffHandle = (item) => {
	console.log(item);
	PickerShow.value = true;
};

// 跳转到新增员工
const toAddStaff = () => {
	uni.navigateTo({
		url: '/subPages/addStaff/index'
	});
};
</script>

<style lang="scss" scoped>
.myStaff-container {
	height: 100vh;
	background-color: #f9f9f9;
	
	.container-box {
		height: calc(100vh - 88rpx - 80rpx);
		padding: 24rpx;
		
		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}
		
		.staff-item {
			padding: 24rpx;
			border-radius: 24rpx;
			background-color: #fff;
			margin-bottom: 24rpx;
			
			.item-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #f0f0f0;
				
				.date {
					color: #999;
					font-size: 24rpx;
					line-height: 40rpx;
				}
				
				.status {
					font-size: 20rpx;
					line-height: 32rpx;
					padding: 0 12rpx;
					border-radius: 6rpx;
				}
				
				.enable {
					color: $uni-main-color;
					background-color: rgba(0, 197, 130, 0.12);
				}
				
				.disable {
					color: #999;
					background-color: rgba(153, 153, 153, 0.12);
				}
			}
			
			.item-bottom {
				color: #333;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;
				padding-top: 24rpx;
				
				.name {
					font-size: 32rpx;
					font-weight: 500;
					line-height: 44rpx;
				}
				
				.phone {
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}
		}
	}
}

.picker-body {
	padding: 0 40rpx;
	margin-bottom: 68rpx;
	
	.picker-item {
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
		text-align: center;
		padding: 32rpx 0;
		border-bottom: 2rpx solid #f0f0f0;
	}
}
</style>
